<template>
    <van-popup
        v-model:show="$store.state.isSearch"
        position="right"
        :style="{ height: '100%', width: '80%' }"
    >
        <div class="container">
            <div class="content">
                <div class="btn">
                    <button class="reset" @click="reset">重置</button>
                    <button class="confirm" @click="goSearchDetail">
                        确定
                    </button>
                </div>
                <div class="search">
                    <input
                        type="text"
                        placeholder="请输入职位关键词"
                        v-model="text"
                    />
                </div>
                <div class="grid">
                    <!-- 地区 -->
                    <div class="gridItem">
                        <h4 class="gridTitle">{{ area.title }}</h4>
                        <div class="gridContent">
                            <div
                                class="gridContentLeft"
                                :class="
                                    AreaData == '' || AreaData == '不限'
                                        ? 'activeLeft'
                                        : ''
                                "
                                @click="chengeLeft(1)"
                            >
                                {{ area.option }}
                            </div>
                            <div class="gridContentRight">
                                <div
                                    class="gridContentRightItem"
                                    :class="
                                        AreaData == item.item
                                            ? 'activeRightItem'
                                            : ''
                                    "
                                    v-for="(item, index) in area.optionData"
                                    :key="index"
                                    @click="changeArea(item.item, index)"
                                >
                                    {{ item.item }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 年限 -->
                    <div class="gridItem">
                        <h4 class="gridTitle">{{ years.title }}</h4>
                        <div class="gridContent">
                            <div
                                class="gridContentLeft"
                                :class="
                                    yearsData == '' || yearsData == '不限'
                                        ? 'activeLeft'
                                        : ''
                                "
                                @click="chengeLeft(2)"
                            >
                                {{ years.option }}
                            </div>
                            <div class="gridContentRight">
                                <div
                                    class="gridContentRightItem"
                                    :class="
                                        yearsData == item.item
                                            ? 'activeRightItem'
                                            : ''
                                    "
                                    v-for="(item, index) in years.optionData"
                                    :key="index"
                                    @click="changeYears(item.item, index)"
                                >
                                    {{ item.item }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 薪资 -->
                    <div class="gridItem">
                        <h4 class="gridTitle">
                            {{ salary.title }}
                        </h4>
                        <div class="gridContent">
                            <div
                                class="gridContentLeft"
                                :class="
                                    salaryData == '' || salaryData == '不限'
                                        ? 'activeLeft'
                                        : ''
                                "
                                @click="chengeLeft(3)"
                            >
                                {{ salary.option }}
                            </div>
                            <div class="gridContentRight">
                                <div
                                    class="gridContentRightItem"
                                    :class="
                                        salaryData == item.item
                                            ? 'activeRightItem'
                                            : ''
                                    "
                                    v-for="(item, index) in salary.optionData"
                                    :key="index"
                                    @click="changeSalary(item.item, index)"
                                >
                                    {{ item.item }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 规模 -->
                    <div class="gridItem">
                        <h4 class="gridTitle">{{ scale.title }}</h4>
                        <div class="gridContent">
                            <div
                                class="gridContentLeft"
                                :class="
                                    scaleData == '' || scaleData == '不限'
                                        ? 'activeLeft'
                                        : ''
                                "
                                @click="chengeLeft(4)"
                            >
                                {{ scale.option }}
                            </div>
                            <div class="gridContentRight">
                                <div
                                    class="gridContentRightItem"
                                    :class="
                                        scaleData == item.item
                                            ? 'activeRightItem'
                                            : ''
                                    "
                                    v-for="(item, index) in scale.optionData"
                                    :key="index"
                                    @click="changeScale(item.item, index)"
                                >
                                    {{ item.item }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 性质 -->
                    <div class="gridItem">
                        <h4 class="gridTitle">{{ nature.title }}</h4>
                        <div class="gridContent">
                            <div
                                class="gridContentLeft"
                                :class="
                                    natureData == '' || natureData == '不限'
                                        ? 'activeLeft'
                                        : ''
                                "
                                @click="chengeLeft(5)"
                            >
                                {{ nature.option }}
                            </div>
                            <div class="gridContentRight">
                                <div
                                    class="gridContentRightItem"
                                    :class="
                                        natureData == item.item
                                            ? 'activeRightItem'
                                            : ''
                                    "
                                    v-for="(item, index) in nature.optionData"
                                    :key="index"
                                    @click="changeNature(item.item, index)"
                                >
                                    {{ item.item }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </van-popup>
</template>

<script>
export default {
    data() {
        return {
            area: {
                title: "地区",
                option: "不限",
                optionData: [
                    {
                        item: "龙华区",
                    },
                    {
                        item: "秀英区",
                    },
                    {
                        item: "美兰区",
                    },
                    {
                        item: "琼山区",
                    },
                ],
            },
            years: {
                title: "工作年限",
                option: "不限",
                optionData: [
                    {
                        item: "在校/应届生",
                    },
                    {
                        item: "1-3年",
                    },
                    {
                        item: "3-5年",
                    },
                    {
                        item: "5年以上",
                    },
                    {
                        item: "10年以上",
                    },
                    {
                        item: "无需经验",
                    },
                ],
            },
            salary: {
                title: "薪资",
                option: "不限",
                optionData: [
                    {
                        item: "1000-2000",
                    },
                    {
                        item: "2001-4000",
                    },
                    {
                        item: "4001-6000",
                    },
                    {
                        item: "6001-8000",
                    },
                    {
                        item: "8001-10000",
                    },
                    {
                        item: "15001-20000",
                    },
                    {
                        item: "20001以上",
                    },
                ],
            },
            scale: {
                title: "公司规模",
                option: "不限",
                optionData: [
                    {
                        item: "少于50人",
                    },
                    {
                        item: "50-150人",
                    },
                    {
                        item: "150-500人",
                    },
                    {
                        item: "500以上",
                    },
                ],
            },
            nature: {
                title: "公司性质",
                option: "不限",
                optionData: [
                    {
                        item: "国企",
                    },
                    {
                        item: "外资",
                    },
                    {
                        item: "合资",
                    },
                    {
                        item: "政府机关",
                    },
                    {
                        item: "事业单位",
                    },
                    {
                        item: "上市公司",
                    },
                    {
                        item: "非盈利组织",
                    },
                    {
                        item: "民营公司",
                    },
                    {
                        item: "其他",
                    },
                ],
            },
            isSearch: false,
            text: "", //输入的关键词
            AreaData: "", //选择好的地区
            yearsData: "", //选择好的年限
            salaryData: "", //选择好的薪资
            scaleData: "", //选择好的规模
            natureData: "", //选择好的性质
        };
    },
    methods: {
        //重置
        reset() {
            this.text = "";
            this.AreaData = "";
            this.yearsData = "";
            this.salaryData = "";
            this.scaleData = "";
            this.natureData = "";

        },
        closeSearch() {
            // 关掉弹框
            this.$store.state.isSearch = false;
        },
        // 前往搜索结果
        goSearchDetail() {
            this.$router.push("/searchdetail");
        },
        // 点击左边不限
        chengeLeft(i) {
            //1地区 2年限 3薪资 4规模 5性质
            console.log(i);
            switch (i) {
                case 1:
                    this.AreaData = "";
                    break;
                case 2:
                    this.yearsData = "";
                    break;
                case 3:
                    this.salaryData = "";
                    break;
                case 4:
                    this.scaleData = "";
                    break;
                default:
                    this.natureData = "";
            }
        },
        //地区
        changeArea(item, index) {
            this.AreaData = item;
        },
        //年限
        changeYears(item, index) {
            this.yearsData = item;
        },
        //薪资
        changeSalary(item, index) {
            this.salaryData = item;
        },
        //规模
        changeScale(item, index) {
            this.scaleData = item;
        },
        //性质
        changeNature(item, index) {
            this.natureData = item;
        },
    },
};
</script>

<style lang="less" scoped>
.container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    .content {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        background: #f5f6f8;
        overflow-y: scroll;
        .btn {
            margin-top: 13.5px;
            display: flex;
            align-items: center;
            justify-content: center;
            button {
                padding: 7px 38px;
                font-size: 12px;
                color: #0199fe;
                border: 1.5px solid #0199fe;
            }
            .reset {
                border-radius: 25px 0 0 25px;
            }
            .confirm {
                border-radius: 0 25px 25px 0;
                color: #fff;
                background: #0199fe;
            }
        }
        .search {
            width: 85%;
            margin: 0 auto;
            margin-top: 10px;

            input {
                width: 100%;
                border-radius: 25px;
                background: #dfdfdf;
                border: none;
                font-size: 12px;
                color: #666666;
                padding: 9px 0;
                padding-left: 15px;
                box-sizing: border-box;
            }
        }
        .grid {
            padding: 0 10px;
            .gridItem {
                margin-top: 10px;
                border-radius: 12.5px;
                background: #fff;
                &:last-child {
                    margin-bottom: 10px;
                }
                .gridTitle {
                    padding: 7.5px 0 0 10px;
                    font-size: 14px;
                    font-weight: bold;
                    color: #000000;
                }
                .gridContent {
                    padding: 10px;
                    display: flex;
                    align-items: flex-start;
                    .gridContentLeft {
                        padding: 5px 13.5px;
                        font-size: 12px;
                        // color: #0199fe;
                        background: #ececec;
                        border-radius: 5px;
                    }
                    .activeLeft {
                        color: #0199fe;
                        background: #d6eaff;
                    }
                    .gridContentRight {
                        margin-left: 10px;
                        flex: 1;
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        .gridContentRightItem {
                            padding: 5px 13px;
                            margin-right: 5px;
                            margin-bottom: 5px;
                            font-size: 12px;
                            color: #000;
                            background: #ececec;
                            border-radius: 5px;
                        }
                        .activeRightItem {
                            color: #0199fe;
                            background: #d6eaff;
                        }
                    }
                }
            }
        }
    }
}
</style>